<template>
  <div class="search-container">
    <CESelect
      :options="[
        { value: 1, label: '男' },
        { value: 2, label: '女' }
      ]"
      style="width: 120px"
      v-model="model.sex"
    />
    <ElInput
      placeholder="请输入内容"
      style="width: 300px"
      v-model="model.keyword"
    />
    <el-button type="primary" :icon="Search">Search</el-button>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { computed } from 'vue'

interface Props {
  modelValue: {
    sex?: number
    keyword?: string
  }
}

const props = withDefaults(defineProps<Props>(), {})

const emits = defineEmits({
  'update:modelValue': (val) => val
})

const model = computed({
  get() {
    return new Proxy(props.modelValue, {
      set(value, name, val) {
        emits('update:modelValue', {
          ...value,
          [name]: val
        })
        return true
      }
    })
  },
  set(val) {
    emits('update:modelValue', val)
  }
})

defineOptions({
  name: 'Search'
})
</script>

<style scoped lang="scss">
.search-container {
  display: flex;
  align-items: center;
}
</style>
